import ComponentCodePreview from "@/components/app/component-code-preview"
import { generateMetadata } from "../utils/metadata"
import { ChatBasic } from "./chat-basic"
import { ChatWithCustomScroll } from "./chat-with-custom-scroll"

export const metadata = generateMetadata(
  "Chat Container",
  "A component for creating chat interfaces with intelligent auto-scrolling behavior, designed to provide a smooth experience in conversation interfaces."
)

# Chat Container

A component for creating chat interfaces with intelligent auto-scrolling behavior, designed to provide a smooth experience in conversation interfaces.

## Examples

### Chat container basic

<ComponentCodePreview
  component={<ChatWithCustomScroll />}
  filePath="app/docs/chat-container/chat-with-custom-scroll.tsx"
  classNameComponentContainer="p-0"
/>

### Streaming Text Example

A chat container that demonstrates text streaming with automatic scrolling. Click the "Show Streaming" button to see a simulated streaming response with the smart auto-scroll behavior in action.

<ComponentCodePreview
  component={<ChatBasic />}
  filePath="app/docs/chat-container/chat-basic.tsx"
  classNameComponentContainer="p-0"
/>

## Installation

<Tabs defaultValue="cli">

<TabsList>
  <TabsTrigger value="cli">CLI</TabsTrigger>
  <TabsTrigger value="manual">Manual</TabsTrigger>
</TabsList>

<TabsContent value="cli">

<CodeBlock
  code={`npx shadcn add "https://prompt-kit.com/c/chat-container.json"`}
  language="bash"
/>

</TabsContent>

<TabsContent value="manual">

<Steps>

<Step>Copy and paste the following code into your project.</Step>

<CodeBlock filePath="components/prompt-kit/chat-container.tsx" language="tsx" />

<Step>Update the import paths to match your project setup.</Step>

</Steps>

</TabsContent>

</Tabs>

## Component API

The ChatContainer is built using three separate components that work together:

### ChatContainerRoot

The main container that provides auto-scrolling functionality using the `use-stick-to-bottom` library.

| Prop      | Type                                   | Default | Description                                     |
| :-------- | :------------------------------------- | :------ | :---------------------------------------------- |
| children  | React.ReactNode                        |         | Child components to render inside the container |
| className | string                                 |         | Additional CSS classes                          |
| ...props  | React.HTMLAttributes\<HTMLDivElement\> |         | All other div props                             |

### ChatContainerContent

The content wrapper that should contain your messages.

| Prop      | Type                                   | Default | Description                                             |
| :-------- | :------------------------------------- | :------ | :------------------------------------------------------ |
| children  | React.ReactNode                        |         | Child components to render inside the content container |
| className | string                                 |         | Additional CSS classes                                  |
| ...props  | React.HTMLAttributes\<HTMLDivElement\> |         | All other div props                                     |

### ChatContainerScrollAnchor

An optional scroll anchor element that can be used for scroll targeting.

| Prop      | Type                                   | Default | Description                                |
| :-------- | :------------------------------------- | :------ | :----------------------------------------- |
| className | string                                 |         | Additional CSS classes                     |
| ref       | React.RefObject\<HTMLDivElement\>      |         | Optional ref for the scroll anchor element |
| ...props  | React.HTMLAttributes\<HTMLDivElement\> |         | All other div props                        |

## Auto-Scroll Behavior

The component uses the `use-stick-to-bottom` library to provide sophisticated auto-scrolling:

- **Smooth Animations**: Uses velocity-based spring animations for natural scrolling
- **Content Resizing**: Automatically detects content changes using ResizeObserver API
- **User Control**: Automatically disables sticky behavior when users scroll up
- **Mobile Support**: Works seamlessly on touch devices
- **Performance**: Zero dependencies and optimized for chat applications
- **Scroll Anchoring**: Prevents content jumping when new content is added above the viewport

Key behaviors:

- **Stick to Bottom**: Automatically scrolls to bottom when new content is added (if already at bottom)
- **Smart Scrolling**: Only scrolls when user is at the bottom, preserves scroll position otherwise
- **Cancel on Scroll**: User can scroll up to cancel auto-scrolling behavior
- **Resume Auto-Scroll**: Returns to auto-scrolling when user scrolls back to bottom

## Using with ScrollButton

The ChatContainer pairs perfectly with the ScrollButton component. The ScrollButton automatically appears when the user scrolls up and disappears when at the bottom:

<CodeBlock
  code={`import { ChatContainerRoot, ChatContainerContent, 
ChatContainerScrollAnchor } from "@/components/prompt-kit/chat-container"
import { ScrollButton } from "@/components/prompt-kit/scroll-button"

function ChatInterface() {
return (

<div className="relative h-[500px]">
  <ChatContainerRoot className="h-full">
    <ChatContainerContent className="space-y-4">
      {/* Your chat messages here */}
      <div>Message 1</div>
      <div>Message 2</div>
      <div>Message 3</div>
    </ChatContainerContent>
    <ChatContainerScrollAnchor />
    <div className="absolute right-4 bottom-4">
      <ScrollButton className="shadow-sm" />
    </div>
  </ChatContainerRoot>
</div>
) } `} language="tsx" />
